<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dilu's Website </title>
<link rel="stylesheet" href="main.css">

</head>
<body>
<header>
<h1>Welcome to my html5 Demo Website</h1>	
</header>
<nav>
		<ul>
			<li>Home</li>
			<li>About</li>
			<li>Introduction</li>
			<li>Content</li>
			<li>Contact</li>
		<ul>
	</nav>
	<section>
		<article>
			ve duong thang
			<canvas id="myCanvas" width="200" height="100"
			style="border:1px solid #000000;">
			</canvas>
			<script>
				var c=document.getElementById("myCanvas");
				var ctx=c.getContext("2d");
				ctx.moveTo(0,0);
				ctx.lineTo(200,100);
				ctx.stroke();
			</script>
			ve hinh tron
			<canvas id="myCanvas2" width="200" height="100"
			style="border:1px solid #000000;">
			</canvas>
			<script>
				var c=document.getElementById("myCanvas2");
				var ctx=c.getContext("2d");
				ctx.beginPath();
				ctx.arc(95,50,40,0,2*Math.PI);
				ctx.stroke();
			</script>
			text in canvas
			<canvas id="myCanvas3" width="200" height="100"
			style="border:1px solid #000000;">
			</canvas>
			<script>
				var c=document.getElementById("myCanvas3");
				var ctx=c.getContext("2d");
				ctx.font="30px Tahoma";
				ctx.fillText("Hello World",10,50);
				ctx.strokeText("Hello World",10,50);
			</script>
			canvas gradient
			<canvas id="myCanvas4" width="200" height="100"
			style="border:1px solid #000000;">
			</canvas>
			<script>
				var c=document.getElementById("myCanvas4");
				var ctx=c.getContext("2d");

				// Create gradient
				var grd=ctx.createLinearGradient(0,0,200,0);
				grd.addColorStop(0,"red");
				grd.addColorStop(1,"white");

				// Fill with gradient
				ctx.fillStyle=grd;
				ctx.fillRect(0,0,200,100);
			</script>
			canvas draw image
			<img id="logo" src="html5_logo.png" alt="Dream HTML5" width="220" height="277">
			<p>Canvas:</p>
			<canvas id="myCanvas5" width="250" height="300" style="border:1px solid #d3d3d3;">
			</canvas>
			<script>
				var c=document.getElementById("myCanvas5");
				var ctx=c.getContext("2d");
				var img=document.getElementById("logo");
				ctx.drawImage(img,10,10);
			</script>
		
		</article>
	</section>
	<aside>
	<h4>News</h4>
	Dilu has three cats and two dogs now!!!
	</aside>
<footer>Copy right by tilu</footer>
</body>
</html>